<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            display: table;
            width: 100%;
        }

        header {
            background: red;
        }

        article {
            background: green;
            height: 100%;
        }

        footer {
            background: yellow;
            display: table-row;   /* 不是很明白*/
            height: 1px;    /* 不是很明白*/
        }

    </style>
</head>
<body>
<!--http://www.css88.com/archives/6308-->
<!--css Table布局-display:table-->




<!--   一、页脚紧贴底部方案  -->
<!--<header>头部</header>-->
<article>中部</article>
<footer>底部</footer>
<!--   二、圣杯布局方案  -->
 <!--  三、水平垂直居中  -->




</body>
</html>